<template>
  <div id="globalHeader">
    <div class="webIcon">
      <img
        src="../assets/logo.png"
        alt="logo"
        style="height: 32px; width: 32px; border-radius: 50%"
      />
      <span style="font-size: 20px; font-weight: bold; margin-left: 8px">innermost</span>
    </div>
    <div class="menu">
      <div
        class="menuItem"
        :style="currentRoute === `/${item.path}` ? { borderBottom: '2px solid #1890ff' } : {}"
        v-for="item in routeList"
        @click="handleGoto(item.path)"
        :key="item.path"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="user">
      <template v-if="!userLoginState">
        <a-button type="primary" @click="handleLogin">登录</a-button>
      </template>
      <template v-else>
        <a-dropdown placement="bottom">
          <a class="ant-dropdown-link" @click.prevent>
            <img :src="userLogin?.userAvatar || DEFAULTAVATAR" alt="" class="avatar" />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="javascript:;">个人中心</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">内容管理</a>
              </a-menu-item>
              <a-menu-item @click="handleLogout">
                <a href="javascript:;">退出登录</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <span class="username">{{ userLogin?.userName || '匿名' }} </span>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { DEFAULTAVATAR } from '@/constant'
import { routes } from '@/router/routes'
import { userLogoutUsingPost } from '@/service/api/userController'
import { useUserStore } from '@/stores/user'
import { message } from 'ant-design-vue'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

//全局导航栏menuList
const routeList = routes.filter((item) => item.path === '/')[0]?.children
//路由代理对象
const router = useRouter()
const route = useRoute()
//当前路由
const currentRoute = ref<string>(route.path)
//用户登录态
const userStore = useUserStore()
const userLogin = userStore.userLoginState
const userLoginState = ref<boolean>(userLogin?.id ? true : false)

/**
 * 路由跳转
 * @param key
 */
const handleGoto = (key: string) => {
  router.push(`/${key}`)
}

/**
 * 监听路由变化
 */
watch(
  () => route.path,
  (newVal) => {
    currentRoute.value = newVal
  },
)
/**
 * 去登陆
 */
const handleLogin = () => {
  router.push('/user/login')
}

/**
 * 用户退出
 */
const handleLogout = async () => {
  try {
    const res = await userLogoutUsingPost()
    if (res.data.code === 0) {
      message.success('成功退出')
      userStore.userLogout()
      router.push('/user/login')
    } else {
      message.error(res.data.message || '退出失败')
    }
  } catch (e) {
    console.log(e)
    message.error('退出失败')
  }
}
</script>
<style scoped>
#globalHeader {
  width: 100%;
  height: 64px;
  line-height: 64px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  position: fixed;
}

#globalHeader .webIcon {
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#globalHeader .user {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#globalHeader .menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  font-size: 14px;
  cursor: pointer;
}

#globalHeader .menu .menuItem {
  margin-right: 20px;
  transition: color 0.6s ease;
  width: 3rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#globalHeader .menu .menuItem:hover {
  color: #1890ff;
  border-bottom: 1px solid #1890ff;
}

#globalHeader .user .avatar {
  vertical-align: middle;
  width: 32px;
  border-radius: 50%;
  cursor: pointer;
}

#globalHeader .user .avatar:hover {
  opacity: 0.8;
}

#globalHeader .user .username {
  font-size: 12px;
  margin-left: 10px;
}
</style>
